{% init comment_class = "" %}
{% init comment_btn_text = "评论" %}
{% init comment_placeholder = "请输入评论..." %}

<style type="text/css">
    .chat-msg-img {
        width: 180px;
    }
</style>

<link rel="stylesheet" type="text/css" href="/static/lib/webuploader/webuploader.css">
<script type="text/javascript" src="/static/lib/webuploader/webuploader.nolog.min.js"></script>

<div class="card {{comment_class}}">
    {% if _has_login %}
    <div class="col-md-12">
        <textarea id="commentText" class="col-md-12 no-outline" placeholder="{{comment_placeholder}}"></textarea>

        <div id="commentFileUploader" class="hide"></div>
        <input type="file" id="commentFilePicker" class="hide" multiple/>
        <input type="button" id="commentFilePickerBtn" class="btn btn-default" value="添加附件"/>
        <button class="btn" id="saveCommentBtn">{{comment_btn_text}}</button>
    </div>
    {% end %}

    <div class="col-md-12" id="comments">
    </div>
</div>

<div class="comment-item-tpl hide">
    <div class="comment-row">
        <div class="comment-user">${user}</div>
        <div class="comment-time">${ctime}</div>
        <div class="comment-content">${html}</div>
        <div class="comment-foot">
            <div class="float-right ${deleteBtnClass}">
                <a class="delete-comment-btn" data-id="${id}" data-content="${content}">删除</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var loadIndex = 0;

    /**
     * 简单的模板渲染，这里假设传进来的参数已经进行了html转义
     */
    function renderTemplate(templateText, object) {
        return templateText.replace(/\$\{(.*?)\}/g, function (context, objKey) {
            return object[objKey.trim()] || '';
        });
    }

    function refreshComments() {    
        $.get("/note/comments", {note_id: "{{file.id}}"}, function (resp) {
            $("#comments").empty();
            for (var i = 0; i < resp.length; i++) {
                var item = resp[i];
                if (item.user != "{{_user_name}}") {
                    item.deleteBtnClass = "hide";
                }

                var tpl = $(".comment-item-tpl").html();
                var element = $(tpl);
                var html = renderTemplate(tpl, item);
                $("#comments").append(html);
            }
            
        }).fail(function (resp) {
            console.log("请求失败", resp);
        });
    }

    function appendToInputText (line) {
        // body...
        var oldTextValue = $("#commentText").val();
        $("#commentText").val(oldTextValue + "\n" + line);
    }

    refreshComments();

    $("#saveCommentBtn").click(function () {
        var comment = {
            note_id: "{{file.id}}",
            content: $("#commentText").val()
        };
        $.post("/note/comment/save", comment, function (resp) {
            console.log(resp);
            $("#commentText").val("");
            refreshComments();
        });
    });

    $("#comments").on("click", ".delete-comment-btn", function () {
        var id = $(this).attr("data-id");
        var content = $(this).attr("data-content");
        var conf = confirm("确定删除`" + content + "`?");
        if (conf) {
            $.post("/note/comment/delete", {comment_id: id}, function (resp) {
                refreshComments();
            });
        }
    });

        // 文件上传
    var BASE_URL = "/static/lib/webuploader"
    // 初始化Web Uploader
    var uploader = xnote.createUploader('#commentFileUploader', false);

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        // 添加文件
    });


    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        // 进度条
    });

    uploader.on( 'uploadBeforeSend', function (object, data, headers) {
        data.dirname = "auto";
        // data.name = "auto";
    })

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file, resp) {
        console.log("uploadSuccess", file, resp);

        var webpath = resp.webpath;
        var content = 'file://$name'.replace(/\$name/g, resp.webpath);
        appendToInputText(content + "\n");
        layer.close(loadIndex);
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        layer.alert('上传失败');
        layer.close(loadIndex);
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        // console.log("uploadComplete", typeof(file), file);
    });

    $("#commentFilePickerBtn").on("click", function (event) {
        console.log("select file button click");
        $("#commentFilePicker").click();
    })

    $("#commentFilePicker").on("change", function (event) {
        console.log(event);
        var fileList = event.target.files; //获取文件对象 
        if (fileList && fileList.length > 0) {
            uploader.addFile(fileList);
            loadIndex = layer.load(2);
        }
    });
})
</script>